﻿<div id="demo">

    <div class="row">
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-info"><i class="ti-wallet"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-light">3249</h3>
                            <h5 class="text-muted m-b-0">入库品种数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-warning"><i class="mdi mdi-cellphone-link"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-lgiht">2376</h3>
                            <h5 class="text-muted m-b-0">出库品种数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-primary"><i class="mdi mdi-cart-outline"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-lgiht">1795</h3>
                            <h5 class="text-muted m-b-0">出库客户数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-danger"><i class="mdi mdi-bullseye"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-lgiht">687</h3>
                            <h5 class="text-muted m-b-0">入库供应商数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <select class="custom-select pull-right">
                        <option selected="">January</option>
                        <option value="1">February</option>
                        <option value="2">March</option>
                        <option value="3">April</option>
                    </select>
                    <h4 class="card-title">汇总表</h4>
                    <div class="table-responsive m-t-20">
                        <table class="table stylish-table">
                            <thead>
                                <tr>
                                    <th colspan="2">Assigned</th>
                                    <th>Name</th>
                                    <th>Priority</th>
                                    <th>Budget</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width:50px;"><span class="round">S</span></td>
                                    <td>
                                        <h6>Sunil Joshi</h6><small class="text-muted">Web Designer</small>
                                    </td>
                                    <td>Elite Admin</td>
                                    <td><span class="label label-success">Low</span></td>
                                    <td>$3.9K</td>
                                </tr>
                                <tr>
                                    <td><span class="round">123</span></td>
                                    <td>
                                        <h6>Andrew</h6><small class="text-muted">Project Manager</small>
                                    </td>
                                    <td>Real Homes</td>
                                    <td><span class="label label-info">Medium</span></td>
                                    <td>$23.9K</td>
                                </tr>
                                <tr>
                                    <td><span class="round round-success">B</span></td>
                                    <td>
                                        <h6>Bhavesh patel</h6><small class="text-muted">Developer</small>
                                    </td>
                                    <td>MedicalPro Theme</td>
                                    <td><span class="label label-primary">High</span></td>
                                    <td>$12.9K</td>
                                </tr>
                                <tr>
                                    <td><span class="round round-primary">N</span></td>
                                    <td>
                                        <h6>Nirav Joshi</h6><small class="text-muted">Frontend Eng</small>
                                    </td>
                                    <td>Elite Admin</td>
                                    <td><span class="label label-danger">Low</span></td>
                                    <td>$10.9K</td>
                                </tr>
                                <tr>
                                    <td><span class="round round-warning">M</span></td>
                                    <td>
                                        <h6>Micheal Doe</h6><small class="text-muted">Content Writer</small>
                                    </td>
                                    <td>Helping Hands</td>
                                    <td><span class="label label-warning">High</span></td>
                                    <td>$12.9K</td>
                                </tr>
                                <tr>
                                    <td><span class="round round-danger">N</span></td>
                                    <td>
                                        <h6>Johnathan</h6><small class="text-muted">Graphic</small>
                                    </td>
                                    <td>Digital Agency</td>
                                    <td><span class="label label-info">High</span></td>
                                    <td>$2.6K</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
